<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="../js/myQuery.js"></script> -->
  <script src="../js/jquery-1.10.1.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    h3 {
      line-height: 60px;
    }

    li {
      list-style: none;
      line-height: 40px;
      border: 1px dashed #333;
    }

    .list {
      overflow: hidden;
    }

    .active {
      background-color: #6ff;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h3 id="title">批量操作元素</h3>
    <ul class="list">
      <li class="first">01</li>
      <li>02</li>
      <li class="mid">03</li>
      <li>04</li>
      <li>05</li>
      <li class="last"><span class="demo">06</span></li>
    </ul>
  </div>
</body>
<script>



  // filter(selector|DOM元素/DOM元素集合|jquery对象|callback)   筛选出与指定表达式匹配的元素集合。

  // (1)  接收css选择器 作为筛选条件
  // $(".list li").filter("[class]").css({background:"red"});
  // $(".list li").filter(".first").css({background:"red"});

  // (2) 接收  DOM元素/DOM元素集合 作为筛选条件
  // var first = document.querySelector(".first");
  // var list = document.querySelectorAll(".first,.last");
  // $(".list li").filter(first).css({background:"red"});
  // $(".list li").filter(list).css({background:"red"});

  // (3) 接收jquery对象 作为筛选条件
  // $(".list li").filter($(".first")).css({background:"red"});

  // (4) 遍历集合 接收回调函数 ,回调函数返回一个条件 将满足条件的元素筛选出来 放到 jquery对象中(伪数组)
  // $(".list li").filter(function(index,item){
  //     // console.log(index,item,this);
  //     // return $(this).hasClass("first");  // class为first的元素
  //     // return $(this).attr("class");   // 有class名的元素
  //     return $(this).prop("className");   // 有class名的元素
  // }).css({background:"red"});







  // not(selector|DOM元素/DOM元素集合|jquery对象|callback)   删除与指定表达式匹配的元素集合。 => 不满足条件的元素形参的jquery对象  filter的去反

  /*  // (1)  接收css选择器 作为筛选条件
   // $(".list li").not("[class]").css({background:"red"});
   // $(".list li").not(".first").css({background:"red"});

   // (2) 接收  DOM元素/DOM元素集合 作为筛选条件
   var first = document.querySelector(".first");
   var list = document.querySelectorAll(".first,.last");
   // $(".list li").not(first).css({background:"red"});
   // $(".list li").not(list).css({background:"red"});

   // (3) 接收jquery对象 作为筛选条件
   // $(".list li").not($(".first")).css({background:"red"});

   // (4) 遍历集合 接收回调函数 ,回调函数返回一个条件 删除满足条件的元素 => 不满足条件的元素 放到 jquery对象中(伪数组)
   $(".list li").not(function(index,item){
       // console.log(index,item,this);
       // return $(this).hasClass("first");  // class为first的元素
       // return $(this).attr("class");   // 有class名的元素
       return $(this).prop("className");   // 有class名的元素
   }).css({background:"red"}); */

  // is(selector|DOM元素/DOM元素集合|jquery对象|callback)  根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。  类似 some

  // 单个元素  => 精确匹配
  // 多个元素  => 只要集合中有一个元素 包含即可  

  // 单个元素  => 精确匹配
  // console.log($(".list li").eq(0).is(".first"));
  // console.log($(".list li").eq(0).parent().is(".list"));

  // console.log($(".list li").is(".first"));
  // console.log($(".list li").parent().is(".list"));

  // var result = $(".list li").is(function(index,item){
  //     return $(this).hasClass("first"); // class为first 
  // })
  // console.log(result);


  // map()   遍历jquery对象,接收一个回调函数, 将回调函数的返回值 放到新的jquery对象中(伪数组)
  // var $list = $(".list li").map(function(){
  //     return $(this).text();
  // })
  // console.log($list);

  var list = $(".list li").map(function () {
    return $(this).text();
  }).get()
  console.log(list);






</script>

</html>